<template>
		<view class="">
			<view class="bg">
			<view class="title" :style="'padding-top:'+titleHeight+'px'    ">云南省第一人民医院</view>
			
			</view>
			<view class="top">
				<view v-for="(item,index) in list[0].vaccine" :key="index" >
					<view @click="header(index)">
						<image :src="item.image" mode="" style="width: 40px; height: 50px; "></image>
						<view >{{item.title}}</view>
					</view>
				</view>
			</view>
			
			<view class="img">
				<view v-for="(item,index) in list[1].reserve" :key="index" >
					<view class="lis">
						<view>{{item.title}}</view>
						<view>{{item.describe}}</view>
						<image :src="item.image" mode="" style="width: 30px; height: 30px;"></image>
					</view>
				</view>
			</view>
				
			<view class="box">
				<view v-for="(item,index) in list[2].popular" :key="item.dep_id">
					
						<view :style="{background:item.background}"class="box1">
							{{item.title}}  
							<image :src="item.image" style="width: 30px; height: 30px;"></image>
						</view>
				
					
				</view>
			</view>
		</view>
		
</template>

<script>
	import {getlist} from "../utils/api"
	 
	export default {
		data() {
			return {
				titleHeight:0,
				list:[]
			}
		},
		onLoad() {
			this.getHeight()
			getlist().then(res=>{
				console.log(res);
				this.list=res.data.data
				
			}),  
			uni.getLocation({
			 type: 'wgs84',
			 success (res) {
				 console.log(res);
			   const latitude = res.latitude
			   const longitude = res.longitude
			 }
			})
		},
		methods: {
			// 胶囊
			getHeight(){
				const res=uni.getMenuButtonBoundingClientRect()
				console.log(res);
				this.titleHeight=res.top
			},
			header(index){
				if(index == 0)uni.navigateTo({url:"/pages/list/list"})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.title {
		font-weight: 600;
		line-height: 30px;
		margin-left: 40rpx;
		font-size: 17px;
		color: #fff;
	}
.bg{
	width: 100%;
	height: 300px;
	background-image: url("https://diancan-1252107261.cos.ap-chengdu.myqcloud.com/tianqi/tianqi-top.png");
	background-size: 100%,100%;
	background-repeat: no-repeat;
}
.top{
	width: 100%;
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.img{
	height: 100px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
	
}
.lis{
	width: 150px;
	border-radius: 10px;
	padding: 10px ;
	 background-image: linear-gradient(to right, #d5deff, #67a5ff);
}
.box{
	width: 100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.box1{
	display: flex;       
	width: 100px;
	height: 50px;
	line-height:50px;
	margin: 5px 0;
	border-radius: 5px;
	font-size: 10px;
	justify-content: space-between;}
</style>
